<template>
    <div class="stationLeftContentThree">
        <div class="bestCityTitle">
            <!--宽窄竖线-->
            <div class="doubleLine lf">
                <div class="wide lf"></div>
                <div class="narrow lf"></div>
            </div>
            <!--最优城市1-->
            <div class="bestCityP lf">
                <div class="bestCityName lf">空气质量</div>
            </div>
        </div>
        <div class="threeLine">
            <div class="firstLine lf"></div>
            <div class="secondLine lf"></div>
            <div class="thirdLine lf"></div>
        </div>
        <div class="onData">
            <!--宽窄竖线-->
            <div class="doubleLine lf">
                <div class="wide lf"></div>
            </div>
            <!--浙江省-->
            <div class="zjProvince lf">
                <div class="provinceName lf">实时数据</div>
            </div>
            <div class="nowTime ">
                     {{this.$store.state.year+' '+this.$store.state.time}}
            </div>
        </div>
        <div class="hbData">
            <table>
                <tr>
                    <td>CO</td>
                    <td>PM<span style="word-wrap: normal; word-break: normal; line-height: 18px; font-family: TimesnewromanpsMT, serif; font-size: 9pt;">2.5</span></td>
                    <td>O₃</td>
                    <td>NO₂</td>
                    <td>PM<span style="word-wrap: normal; word-break: normal; line-height: 18px; font-family: TimesnewromanpsMT, serif; font-size: 9pt;">10</span></td>
                    <td>SO₂</td>
                </tr>
                <tr>
                    <td>{{AllCityAqi.CODATA}}</td>
                    <td>{{AllCityAqi.PM25DATA}}</td>
                    <td>{{AllCityAqi.PM25DATA}}</td>
                    <td>{{AllCityAqi.NO2DATA}}</td>
                    <td>{{AllCityAqi.PM10DATA}}</td>
                    <td>{{AllCityAqi.SO2DATA}}</td>
                </tr>
            </table>
            <!-- <div class="hbDataLi">
                <span class="iconfont">&#xe62b;</span>
                <span>{{StationEPAdata.negative_K04==null?"-":StationEPAdata.negative_K04}}/{{StationEPAdata.MaxNegative_K04}}</span>  
            </div>
            <div class="hbDataPM">
                <div class="lf">
                    <div class="iconfont">&#xe60a;</div>
                    <div></div>
                </div>
                <div class="lf">
                    <div>{{AllCityAqi.pm2_5==null?"-":AllCityAqi.pm2_5}}</div>
                    <div>(μg/m³)</div>
                </div>
            </div>
            <div class="hbDataO">
                <div  class="lf">
                    <div class="iconfont">&#xe633;</div>
                    <div>O3</div>
                </div>
                <div  class="lf">
                    <div>{{AllCityAqi.o3==null?"-":AllCityAqi.o3}}</div>
                    <div>(μg/m³)</div>
                </div>
            </div> -->
        </div>
        <div class="onData" style="margin-top:0">
            <!--宽窄竖线-->
            <div class="doubleLine lf">
                <div class="wide lf"></div>
            </div>
            <!--浙江省-->
            <div class="zjProvince lf">
                <div class="provinceName lf">日均值</div>
            </div>
            <div class="nowTime ">
                {{this.$store.state.year}}
            </div>
        </div>
        <div class="hbData" >
            <table>
                <tr>
                    <td>CO</td>
                    <td>PM<span style="word-wrap: normal; word-break: normal; line-height: 18px; font-family: TimesnewromanpsMT, serif; font-size: 9pt;">2.5</span></td>
                    <td>O₃</td>
                    <td>NO₂</td>
                    <td>PM<span style="word-wrap: normal; word-break: normal; line-height: 18px; font-family: TimesnewromanpsMT, serif; font-size: 9pt;">10</span></td>
                    <td>SO₂</td>
                </tr>
                <tr  >
                    <td>{{AllCityAqiCurDay.CODATA}}</td>
                    <td>{{AllCityAqiCurDay.PM25DATA}}</td>
                    <td>{{AllCityAqiCurDay.O31DATA}}</td>
                    <td>{{AllCityAqiCurDay.NO2DATA}}</td>
                    <td>{{AllCityAqiCurDay.PM10DATA}}</td>
                    <td>{{AllCityAqiCurDay.SO2DATA}}</td>
                </tr>
            </table>
            <!-- <div class="hbDataLi lf">
                <span class="iconfont">&#xe62b;</span>
                <span>{{StationEPAdata.negative_K04}}/{{StationEPAdata.MaxNegative_K04}}</span>  
            </div>
            <div class="hbDataPM lf">
                <div class="lf">
                    <div class="iconfont">&#xe60a;</div>
                    <div>PM2.5</div>
                </div>
                <div class="lf">
                    <div>{{AllCityAqi.pm2_5}}</div>
                    <div>(μg/m³)</div>
                </div>
                
            </div>
            <div class="hbDataO lf">
                <div  class="lf">
                    <div class="iconfont">&#xe633;</div>
                    <div>O3</div>
                </div>
                <div  class="lf">
                    <div>{{AllCityAqi.o3}}</div>
                    <div>(μg/m³)</div>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
export default {
    name: 'StationLeftContentThree',
    props:{
        AllCityAqi:Object,
        AllCityAqiCurDay:Object,
        StationEPAdata:Object
    }
}
</script>
<style lang="stylus" scoped>
    /* 样式穿透 .leftContentTwo >>> .littleLine */
    /* 所有样式 */
    .stationLeftContentThree
        width: 4.03rem
        height: 24.7vh
        color: white
        .bestCityTitle
            width: 100%
            height: 3.9vh
            padding-top: 1vh
            .doubleLine
                width: .11rem
                height: 1.94vh
                .wide
                    width: .07rem
                    height: 1.94vh
                    background : #41E6FD
                .narrow
                    width: .02rem
                    height: 1.94vh
                    background : #41E6FD
                    margin-left: .02rem
            .bestCityName
                font-size: .18rem
                font-family: FZZXHJW--GB1-0
                margin-left: .12rem
        .threeLine
            width: 100%
            height: .03px
            .firstLine
                width: 3.4rem
                height: .03rem
                background : #41E6FD
            .secondLine
                width: .08rem
                height: .03rem
                background: #333
                margin-left: .06rem
                margin-right: .04rem
            .thirdLine
                width: .44rem
                height: .03rem
                background: #FFFFFF
        .onData
            margin-top:1.22vh
            height: 3.5vh
            .doubleLine
                width: .11rem
                height: 2.77vh
                .wide
                    width: .02rem
                    height: 2.77vh
                    background : #41E6FD
                    margin-left: .09rem
                    margin-right: .06rem
            .zjProvince
                font-size: .18rem
                line-height: 2.77vh
                .provinceName
                    font-size: .18rem
                    font-family: FZZXHJW--GB1-0
                    margin-left: .12rem
            .nowTime
                float: right
                font-size: .16rem
                line-height: 2.77vh
                margin-right: .05rem
        .hbData
            margin-top:vh
            height: 6.85vh
            font-size: .2rem
            display: flex
            justify-content : space-around
            table
                border:1px solid #7d7d7d
                border-collapse: collapse;
                tr
                    border:1px solid #7d7d7d
                    td
                        width:60px;
                        height:23px;
                        line-height :23px
                        font-size:.14rem
                        border:1px solid #7d7d7d
                        text-align : center
            .hbDataLi
                span:nth-child(2)
                    color:#58EBFF
            .hbDataPM
                text-align :center
                // margin-left: .3rem
                // margin-right: .3rem
                div:nth-child(2)
                    div:nth-child(1)
                        color:#58EBFF
                    div:nth-child(2)
                        color:#A9A9A9
                        margin-left:.05rem
                        font-size: .1rem
                div:nth-child(1)
                    div:nth-child(1)
                        height:2.04vh
                    div:nth-child(2)
                        
                        color:#A9A9A9
                        font-size: .1rem
            .hbDataO
                div:nth-child(2)
                    text-align :center
                    div:nth-child(1)
                        color:#58EBFF
                    div:nth-child(2)
                        color:#A9A9A9
                        margin-left:.05rem
                        font-size: .1rem
                div:nth-child(1)
                    div:nth-child(1)
                        height:2.04vh
                    div:nth-child(2)
                        color:#A9A9A9
                        font-size: .1rem
</style>


